<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#target {
  --unregistered-a: 100;
}
</style>
<div id="target"></div>
<script>
setup(() => {
  CSS.registerProperty({
    name: '--test',
    syntax: '<number>',
    initialValue: '0',
    inherits: false,
  });
});

test(() => {
  let animation = target.animate({'--test': ['var(--unregistered-a)', 'var(--unregistered-b)']}, 100);
  // Because this property is unregistered it will not interpolate smoothly, instead it will flip at 50%.
  let unregisteredAnimation = target.animate({'--unregistered-b': ['200', '300']}, 100);

  unregisteredAnimation.currentTime = 25;
  {
    animation.currentTime = 25;
    assert_equals(getComputedStyle(target).getPropertyValue('--test'), '125', 'target at 25%, to at 25%');

    animation.currentTime = 75;
    assert_equals(getComputedStyle(target).getPropertyValue('--test'), '175', 'target at 75%, to at 25%');
  }

  unregisteredAnimation.currentTime = 75;
  {
    animation.currentTime = 25;
    assert_equals(getComputedStyle(target).getPropertyValue('--test'), '150', 'target at 25%, to at 75%');

    animation.currentTime = 75;
    assert_equals(getComputedStyle(target).getPropertyValue('--test'), '250', 'target at 75%, to at 75%');
  }
}, 'Animated registered custom properties can var() reference animated unregistered custom properties across separate Animations.');
</script>
